<template>
	<view class="line-number" :class="{ 'circle': props.mode == 1 }">
		<view class="line-number-subtract"></view>
		<view class="line-number-input">
			<input type="number" style="height: 100%;text-align: center;"/>
		</view>
		<view class="line-number-add"></view>
	</view>
</template>

<script setup>
import { ref, defineProps } from 'vue'

/**
 * buttonTab 计步器
 * @description 
 * @property {mode} barType 进度模式 0 1
 * @property {Number} value 默认值
 */
const props = defineProps({
	mode: {
		type: Number,
		default: 0
	},
	value: {
		type: Number,
		default: 0,
	}
});


</script>

<style lang="scss">
.line-number {
	display: inline-flex;
	border: 1rpx solid #ccc;
	background-color: #f7f7f7;
	
	.line-number-subtract {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		box-sizing: border-box;
		&::after {
			content: '';
			width: 60%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			height: 4rpx;
			background-color: orange;
		}
	}
	.line-number-input {
		width: 80rpx;
		border-left: 1rpx solid #ccc;
		border-right: 1rpx solid #ccc;
		background-color: #fff;
		display: flex;
		align-items: center;
	}
	.line-number-add {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		box-sizing: border-box;
		&::before {
			content: '';
			width: 4rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			height: 60%;
			background-color: orange;
		}
		&::after {
			content: '';
			width: 60%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			height: 4rpx;
			background-color: orange;
		}
	}
	
	&.circle {
		border: none;
		background-color: #fff;
		.line-number-subtract,.line-number-add {
			border: 1rpx solid orange;
			border-radius: 50%;
		}
		.line-number-input {
			border: none;
			background-color: #f7f7f7;
		}
	}
}
</style>